<script setup lang="ts">
const props = defineProps<{
  initialVal?: string
}>()

defineEmits(['change', 'confirm'])
</script>

<template>
  <!-- 容器 -->
  <view class="flex justify-between w-full h-74rpx border-solid border-1px border-#E3E3E3 bg-white rounded-full">
    <!-- 左侧输入框 -->
    <view class="flex items-center px-30rpx w-full">
      <!-- 搜索图标 -->
      <image class="w-26rpx h-28rpx" src="@/static/images/home/search.png" />
      <Spacer width="13" />
      <!-- 输入框 -->
      <input
        :value="props.initialVal"
        type="text"
        class="w-full h-74rpx text-28rpx leading-28rpx text-black"
        placeholder-class="text-28rpx leading-28rpx text-tertiary"
        placeholder="搜索案例"
        @input="(e) => $emit('change', e)"
      >
    </view>
    <!-- 右侧按钮 -->
    <view
      class="flex justify-center items-center w-148rpx h-74rpx flex-shrink-0 text-28rpx leading-28rpx px-47rpx text-white bg-brand rounded-full "
      @tap="$emit('confirm')"
    >
      搜索
    </view>
  </view>
</template>
